<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="style.css" rel="stylesheet" />
    <title>表单页面设计</title>
  </head>
  <body>
    <form class="container">
      <h1>用户注册</h1>
      <div class="form-item">
        <input class="txt" type="text" placeholder="请输入11位手机号" />
      </div>
      <div class="form-item">
        <input
          class="txt"
          type="text"
          style="width: 160px; margin-right: 20px"
          placeholder="请输入验证码"
        />
        <button>获取验证码</button>
      </div>
      <div class="form-item">
        <input class="txt" type="text" placeholder="请输入密码" />
      </div>
      <div class="form-item">
        <input class="txt" type="text" placeholder="请再次确认密码" />
      </div>
      <div class="form-item">
        <select multiple="multiple" class="txt">
          <option>爱好1</option>
          <option>爱好2</option>
          <option>爱好3</option>
          <option>爱好4</option>
          <option>爱好5</option>
          <option>爱好6</option>
          <option>爱好7</option>
          <option>爱好8</option>
          <option>爱好9</option>
          <option>爱好10</option>
        </select>
      </div>
      <div class="form-item">
        <span style="margin-right: 20px">性别：</span>
        <label> <input type="radio" name="sex" checked />男</label>
        <label
          ><input type="radio" name="sex" style="margin-left: 20px" />女</label
        >
      </div>
      <div class="form-item">
        <textarea class="txt" placeholder="请输入内容"></textarea>
      </div>
      <div class="form-item" >
        <label class="policy"><input type="checkbox"  /> <span>我同意一下规则</span></label>
      </div>
      <div class="form-item">
        <button type="submit">立即注册</button>
        <button type="reset" style="margin-left: 20px">重置表单</button>
      </div>
    </form>
  </body>
</html>
